<template>
  <el-dialog :model-value="visible" title="请选择" width="800" :before-close="handleClose">
    <AmapContainer ref="amapContainer" />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :disabled="amapContainer?.iMap?.canSubmit" @click="handleConfirm">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AmapExplore">
/*
  // 使用方式
  // amapFlag: 控制弹窗显隐
  // iMap必须ref定义, 接收选择地址数据
  // 示例：
  // <AmapExplore v-model:visible="amapFlag" v-model:amap="iMap" />
*/
import { ref, withDefaults } from "vue";
import { IAddress } from "../interface/index";
import AmapContainer from "./AmapContainer.vue";

withDefaults(
  defineProps<{
    visible: boolean;
    amap: Partial<IAddress>;
  }>(),
  {
    visible: false
  }
);

const amapContainer = ref();

// 定义emits
const emits = defineEmits<{
  "update:amap": [value: IAddress];
  "update:visible": [value: boolean];
}>();

const handleConfirm = () => {
  // delete amapContainer.value?.iMap?.canSubmit;
  emits("update:amap", amapContainer.value?.iMap);
  handleClose();
};

const handleClose = () => {
  emits("update:visible", false);
};
</script>

<style scoped lang="scss"></style>
